<template>
	<div class="home">
		<homeHeader ></homeHeader>
		<homeSwiper :list="swiperList"></homeSwiper>
		<homeIcon :icon="iconList"></homeIcon>
		<recommend :recommend="recommendList"></recommend>
		<weekend :weekend="weekendList"></weekend>
	</div>
</template>
<script>

import HomeHeader from './common/header.vue'
import HomeSwiper from './common/swiper.vue'
import HomeIcon from './common/icons.vue'
import Recommend from './common/recommend.vue'
import Weekend from './common/weekend.vue'
import {mapState} from 'vuex'
export default{
	components:{HomeHeader,HomeSwiper,HomeIcon,Recommend,Weekend},
	data(){
		return{
			swiperList:[],
			iconList:[],
			recommendList:[],
			weekendList:[],
			lastCity:''
		}
	},
	computed:{
		...mapState(['city'])
	},
	mounted(){
		this.lastCity=this.city;
		this.getHomeInfo();
	},
	methods:{
		getHomeInfo(){
			this.$axios.get('/api/index.json?city=' +this.city).then((res)=>{
				console.log(res.data.data)
				res=res.data;
				if(res.ret&&res.data){
					
					this.swiperList=res.data.swiperList;
					this.iconList=res.data.iconList;
					this.recommendList=res.data.recommendList;
					this.weekendList=res.data.weekendList;
				}
			})
		}
	},
	activated(){
		if(this.lastCity!==this.city){
			this.lastCity=this.city;
			this.getHomeInfo();
		}

	}
}
</script>
<style lang="scss">
</style>